<template>
	<gracePage headerBG="#FFFFFF" :customHeader="false">
		<view slot="gBody" class="grace-body">
			<form @submit="formSubmit" class="grace-form grace-margin-top">
				<view class="grace-form-item grace-border-b">
					<text class="grace-form-label">收货人</text>
					<view class="grace-form-body">
						<input type="text" class="grace-form-input" v-model="address.name" name="name" placeholder="请填写收货人"></input>
					</view>
				</view>
				<view class="grace-form-item grace-border-b">
					<text class="grace-form-label">手机号码</text>
					<view class="grace-form-body">
						<input type="number" class="grace-form-input" v-model="address.mobile" name="mobile" placeholder="请填写电话号码"></input>
					</view>
				</view>
				<view class="grace-form-item grace-border-b">
					<text class="grace-form-label">所在地区</text>
					<view class="grace-form-body" @tap="openPicker">
						<input type="text" class="grace-form-input" name="area" :value="area" disabled placeholder="请选择所在地区"></input>
					</view>
				</view>
				<view class="grace-form-item">
					<text class="grace-form-label">详细地址</text>
					<view class="grace-form-body">
						<input type="text" class="grace-form-input" v-model="address.detail" name="detail" placeholder="如道路\门牌号\小区等"></input>
					</view>
				</view>
				<view class="grace-form-item">
					<text class="grace-form-label">地址标签</text>
					<view class="grace-form-body grace-flex-end">
						<text class="margin grace-capsule-text" @tap="fireTag('家')">家</text><text class="margin grace-capsule-text" @tap="fireTag('公司')">公司</text><text class="margin grace-capsule-text" @tap="fireTag('其他')">其他</text>
					</view>
					<!-- <text class="grace-icons icon-help1 grace-form-icon grace-text-center"></text> -->
				</view>
				<view class="grace-form-item">
					<text class="grace-form-label">默认地址</text>
					<view class="grace-form-body grace-nowrap grace-flex-end">
						<switch name="is_default" :checked="address.is_default" @change="switchChange"/>
					</view>
				</view>
				<view style="padding:30rpx 0;">
					<button formType="submit" type="warn" class="grace-button grace-border-radius">提交</button>
				</view>
				<graceAddressPicker :show="graceAddressPickerShow" @confirm="pickerConfirm" @close="closePicker" cancelTColor="关闭"></graceAddressPicker>
			</form>
		</view>
	</gracePage>
</template>
<script>
import gracePage from "../../graceUI/components/gracePage.vue";
import graceAddressPicker from '../../graceUI/components/graceAddressPicker.vue';
var  graceChecker = require("../../graceUI/jsTools/graceChecker.js");
export default {
    data() {
    	return {
			graceAddressPickerShow : false,
			address:{
				name:'',
				mobile:'',
				province:'',
				city:'',
				area:'',
				detail:'',
				is_default:false,
				tag:'其他'
			},
			area:'',
		};
    },
	onLoad:function(options){
		if( options.hasOwnProperty('id') ){
			this.address.id = options.id;
			this.address.name = options.name;
			this.address.mobile = options.mobile;
			this.address.city = options.city;
			this.address.area = options.area;
			this.address.detail = options.detail;
			this.address.is_default = options.is_default;
			this.address.tag = options.tag;
		}
	},
	methods:{
		openPicker : function () {
			this.graceAddressPickerShow = true;
		},
		pickerConfirm : function(e){
			this.area = e.names[0]+' '+e.names[1]+' '+e.names[2];
			this.address.province = e.codes[0];
			this.address.city = e.codes[1];
			this.address.area = e.codes[2];
			this.closePicker();
		},
		switchChange:function (e) {
			let value = e.target.value
			this.address.is_default = value;
			console.log(this.address);
		},
		closePicker : function () {
			this.graceAddressPickerShow = false;
		},
		fireTag:function(tag){
			this.address.tag = tag;
		},
		// 表单提交
		formSubmit : function(e){
			var rule = [
				// { name: "name", checkType: "string", checkRule: "1,10", errorMsg: "联系人应为1-20个字符" },
				// { name: "phoneno", checkType: "phoneno", checkRule: "", errorMsg: "请正确填写手机号" },
				// { name: "area", checkType: "string", checkRule: "1,100", errorMsg: "请选择所在地区" },
				// { name: "address", checkType: "string", checkRule: "5,100", errorMsg: "请正确填写详细地址" }
			];
			console.log(this.address);
			var formData = e.detail.value;
			var checkRes = graceChecker.check(formData, rule);
			if(checkRes){
				let data = this.address;
				this.addAddress( data );
				
			}else{
				uni.showToast({ title: graceChecker.error, icon: "none" });
			}
		},
		//用户注册
		async addAddress(data) {
			let ret = await this.$apis.addAddress(data);
			uni.showToast({
				title: "添加成功!",
				icon: "none"
			});
			// this.goBack();
		},
		//退回
		goBack : function(){
		    uni.navigateBack({});
		},
	},
	components:{gracePage, graceAddressPicker}
}
</script>
<style>
.margin{margin:10rpx 10rpx 0 0;}
</style>